<template>
  <div class="ReleaseRequirement">
    <div class="banner">
      <img src="~assets/images/newpage-image/need-banner.jpg" alt="" />
      <div class="banner-text">
        <Button class="btn" type="primary">
          <router-link to="/require">发布需求</router-link>
        </Button>
      </div>
    </div>
    <div class="container">
      <div class="top">
        <div class="desc">
          <div class="title">
            找包装网
            <p>一键触达海量供应商，让您一呼百应</p>
          </div>
          <div class="arrow">
            <img src="~assets/images/newpage-image/need-arrow.png" alt="" />
          </div>
          <div class="txt">
            <ul>
              <li>专业平台</li>
              <li>认证企业</li>
              <li>品类丰富</li>
              <li>产品多样</li>
              <li>商家支持</li>
              <li>全程透明</li>
            </ul>
          </div>
        </div>
        <div class="pic-box">
          <img src="~assets/images/newpage-image/need-pic1.png" alt="" />
        </div>
      </div>
    </div>
    <div class="show-data">
      <div class="container">
        <h3>好的平台，才会有好的产品</h3>
        <p class="sub-txt">带给您最新、最丰富的资源</p>
        <div class="data-box">
          <div class="item">
            <p class="num ">
              <span class="counter-value">30</span><span>+</span>
            </p>
            <p>服务行业</p>
          </div>
          <div class="item">
            <p class="num">
              <span class="counter-value">200</span><span>+</span>
            </p>
            <p>产品类别</p>
          </div>
          <div class="item">
            <p class="num">＜<span class="counter-value-reduce">24</span>h</p>
            <p>响应时间</p>
          </div>
          <div class="item">
            <p class="num"><span class="counter-value">100</span>%</p>
            <p>响应率</p>
          </div>
          <div class="item">
            <p class="num">
              <span class="counter-value">3000</span><span>+</span>
            </p>
            <p>活跃供应商</p>
          </div>
        </div>
      </div>
    </div>
    <div class="container step">
      <div class="title">
        <img src="~assets/images/newpage-image/need-titleicon1.png" alt="" />
        <h3>发布需求流程</h3>
        <img src="~assets/images/newpage-image/need-titleicon2.png" alt="" />
      </div>
      <div class="step-box">
        <div class="step1 step-item">
          <div class="step-desc">
            <img src="~assets/images/newpage-image/num1.png" alt="" />
            <div class="desc">
              <h4>填写基本信息</h4>
              <p>选择所需的产品或服务，按照平台模板填写基本信息。</p>
            </div>
          </div>
          <div class="pic">
            <img src="~assets/images/newpage-image/need-step1.png" alt="" />
          </div>
        </div>
        <div class="step2 step-item">
          <div class="pic">
            <img src="~assets/images/newpage-image/need-step2.png" alt="" />
          </div>
          <div class="step-desc">
            <img src="~assets/images/newpage-image/num2.png" alt="" />
            <div class="desc">
              <h4>选择供应商</h4>
              <p>
                平台入驻上千认证企业，自由选择您心仪的合作伙伴，或者由平台为您推荐。
              </p>
            </div>
          </div>
        </div>
        <div class="step3 step-item">
          <div class="step-desc">
            <img src="~assets/images/newpage-image/num3.png" alt="" />
            <div class="desc">
              <h4>提交RFQ</h4>
              <p>确认并发布需求信息，一键触达广大优质供应商，静待企业响应。</p>
            </div>
          </div>
          <div class="pic">
            <img src="~assets/images/newpage-image/need-step3.png" alt="" />
          </div>
        </div>
        <div class="step4 step-item">
          <div class="pic">
            <img src="~assets/images/newpage-image/need-step4.png" alt="" />
          </div>
          <div class="step-desc">
            <img src="~assets/images/newpage-image/num4.png" alt="" />
            <div class="desc">
              <h4>报价管理</h4>
              <p>
                平台提供AI报价管理功能，帮助您多维度快速比较、分析供应商的报价方案。
              </p>
            </div>
          </div>
        </div>
        <div class="step5 step-item">
          <div class="step-desc">
            <img src="~assets/images/newpage-image/num5.png" alt="" />
            <div class="desc">
              <h4>确定合作</h4>
              <p>与潜在供应商洽谈，选择最终合作伙伴，确定合作关系。</p>
            </div>
          </div>
          <div class="pic">
            <img src="~assets/images/newpage-image/need-step5.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="new-release">
      <div class="container">
        <h3>最新发布</h3>
        <i class="line"></i>
        <div class="release-box">
          <div class="item" v-for="(item, index) in data" :key="index">
            <div class="pic-box">
              <img :src="item.img_list" alt="" class="object" />
            </div>
            <div class="desc">
              <p class="name textOverflow">需求名称：{{ item.goods_info }}</p>
              <p class="date">发布时间：{{ item.create_time }}</p>
              <div class="bottom">
                <div class="num">
                  {{ item.num }}
                </div>
                <router-link to="/require" class="btn">也去发布</router-link>
              </div>
            </div>
          </div>
        </div>
        <a href="" class="more-btn">查看更多</a>
      </div>
    </div>
  </div>
</template>

<script>
import { Button } from "element-ui"
import { demandRecentlyList } from '@/request/api'
import $ from "jquery" //在需要使用的页面中

export default {
  components: {
    Button
  },
  data() {
    return {
      data: [
        {
          pic: require("../../assets/images/newpage-image/test-pic.png"),
          needname: "塑料瓶塑料包装塑料塑料瓶塑料包装塑料",
          date: "2020-02-03 15:22:45",
          num: "5000pcs"
        },
        {
          pic: require("../../assets/images/newpage-image/test-pic.png"),
          needname: "塑料瓶塑料包装塑料塑料瓶塑料包装塑料",
          date: "2020-02-03 15:22:45",
          num: "5000pcs"
        },
        {
          pic: require("../../assets/images/newpage-image/test-pic.png"),
          needname: "塑料瓶塑料包装塑料塑料瓶塑料包装塑料",
          date: "2020-02-03 15:22:45",
          num: "5000pcs"
        },
        {
          pic: require("../../assets/images/newpage-image/test-pic.png"),
          needname: "塑料瓶塑料包装塑料塑料瓶塑料包装塑料",
          date: "2020-02-03 15:22:45",
          num: "5000pcs"
        },
        {
          pic: require("../../assets/images/newpage-image/test-pic.png"),
          needname: "塑料瓶塑料包装塑料塑料瓶塑料包装塑料",
          date: "2020-02-03 15:22:45",
          num: "5000pcs"
        },
        {
          pic: require("../../assets/images/newpage-image/test-pic.png"),
          needname: "塑料瓶塑料包装塑料塑料瓶塑料包装塑料",
          date: "2020-02-03 15:22:45",
          num: "5000pcs"
        }
      ],
      isShow: true
    }
  },
  created() {
    window.addEventListener("scroll", this.windowScroll)
    this.getDemandList()
  },
  methods: {
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (scrollTop >= 400 && this.isShow) {
        this.onready()
        this.isShow = false
      } else {
        return false
      }
    },
    getDemandList() {
      demandRecentlyList().then(res => {
        if(res.status !== 200) return this.$message.error(res.message)
        this.data = res.data
      })
    },
    onready() {
      $(document).ready(function() {
        $(".counter-value").each(function() {
          $(this).prop("Counter", 0).animate( { Counter: $(this).text() },
              {
                duration: 3500,
                easing: "swing",
                step: function(now) {
                  $(this).text(Math.ceil(now))
                }
              }
            )
        })
        $(".counter-value-reduce").each(function() {
          $(this).prop("Counter", 100).animate(
              { Counter: $(this).text() },
              {
                duration: 3500,
                easing: "swing",
                step: function(now) {
                  $(this).text(Math.ceil(now))
                }
              }
            )
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ReleaseRequirement {
  .banner {
    position: relative;
    img {
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      display: block;
    }
    .banner-text {
      width: 1200px;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }
  .container {
    padding: 82px 0 75px;
    .top {
      display: flex;
      .desc {
        margin-right: 60px;
        .title {
          font-size: 34px;
          color: #666;
          line-height: 48px;
        }
        .arrow {
          margin: 20px 0;
        }
        .txt {
          ul {
            display: flex;
            flex-wrap: wrap;
            width: 60%;
            li {
              width: 50%;
              font-size: 20px;
              color: #666;
              position: relative;
              padding-left: 20px;
              margin-bottom: 40px;
              &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 7px;
                height: 7px;
                background: #666666;
                border-radius: 50%;
              }
            }
          }
        }
      }
    }
  }
  .show-data {
    height: 472px;
    background-image: url("~@/assets/images/newpage-image/need-bg1.jpg");
    background-position: center center;
    background-size: 100% 100%;
    color: #fff;
    h3 {
      text-align: center;
      font-size: 34px;
    }
    .sub-txt {
      text-align: center;
      font-size: 16px;
      position: relative;
      margin: 20px 0 100px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 40%;
        height: 1px;
        background: #ffffff;
        opacity: 0.09;
        transform: translateY(-50%);
      }
      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 40%;
        height: 1px;
        background: #ffffff;
        opacity: 0.09;
        transform: translateY(-50%);
      }
    }
    .data-box {
      display: flex;
      justify-content: space-between;
      .item {
        p {
          text-align: center;
          font-size: 18px;
        }
        .num {
          font-size: 58px;
          margin-bottom: 20px;
        }
      }
    }
  }
  .step {
    padding: 93px 0 107px;
    color: #666;
    .title {
      display: flex;
      justify-content: center;
      align-content: center;
      margin-bottom: 64px;
      h3 {
        font-size: 30px;
        margin: 0 21px;
      }
      img {
        height: 33px;
        margin-top: 4px;
      }
    }
    .step-box {
      .step-item {
        display: flex;
        justify-content: space-between;
        .step-desc {
          position: relative;
          margin-top: 68px;
          padding-left: 124px;
          img {
            position: absolute;
            top: 0;
            left: 0;
          }
          .desc {
            margin-top: 55px;
            h4 {
              font-size: 24px;
            }
            p {
              font-size: 18px;
              margin-top: 27px;
            }
          }
        }
        &:nth-of-type(2n) {
          .pic {
            margin-right: 157px;
          }
        }
      }
      .step1 {
        margin-bottom: 93px;
      }
      .step2 {
        margin-bottom: 57px;
      }
      .step3 {
        margin-bottom: 92px;
      }
      .step4 {
        margin-bottom: 20px;
      }
      .step5 {
        .step-desc {
          margin-top: 142px;
        }
      }
    }
  }
  .new-release {
    background: #f3f4f7;
    padding: 73px 0 70px;
    .container {
      padding: 0;
    }
    h3 {
      font-size: 30px;
      color: #4d4d4d;
      text-align: center;
    }
    .line {
      display: block;
      width: 100%;
      height: 1px;
      background: #e9e9e9;
      margin: 40px 0;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent #e9e9e9 transparent;
      }
      &::after {
        content: "";
        position: absolute;
        top: -38.5px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent #f3f4f7 transparent;
      }
    }
    .release-box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .item {
        width: 49%;
        height: 263px;
        background: #ffffff;
        box-shadow: 0px 0px 22px 0px rgba(164, 177, 181, 0.22);
        display: flex;
        padding: 20px;
        margin-bottom: 23px;
        .pic-box {
          width: 223px;
          height: 223px;
          margin-right: 24px;
        }
        .desc {
          width: 54%;
          font-size: 18px;
          color: #666;
          position: relative;
          .date {
            margin-top: 12px;
          }
          .bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            .num {
              font-size: 20px;
              font-weight: bold;
              color: #e48b2c;
            }
            .btn {
              display: block;
              width: 108px;
              height: 40px;
              border: 1px solid #ed8e23;
              border-radius: 10px;
              line-height: 40px;
              text-align: center;
              color: #e48b2c;
              font-size: 16px;
              &:hover {
                color: #fff;
                background: #e48b2c;
              }
            }
          }
        }
      }
    }
    .more-btn {
      display: block;
      width: 235px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      background: #e48b2c;
      border-radius: 10px;
      margin: 47px auto 0;
      &:hover {
        opacity: 0.6;
      }
    }
  }
}
</style>
